<template>
	<UserLayout>
		<div class="main">
			<div class="mains">
				<a-form
					:model="formState"
					name="normal_login"
					class="user-layout-login"
					:rules="rules"
					@finish="onFinish"
					@finishFailed="onFinishFailed"
				>
					<a-row :gutter="24">
						<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<a-form-item class="user-layout-login" name="username">
								<a-input v-model:value="formState.username" size="large" type="text" placeholder="登录账号">
									<template #prefix>
										<UserOutlined class="site-form-item-icon" />
									</template>
								</a-input>
							</a-form-item>

							<a-form-item name="password">
								<a-input-password v-model:value="formState.password" size="large" type="text" placeholder="登录密码">
									<template #prefix>
										<LockOutlined class="site-form-item-icon" />
									</template>
								</a-input-password>
							</a-form-item>
						</a-col>
						<a-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14">
							<a-form-item name="code">
								<a-input
									v-model:value="formState.code"
									size="large"
									type="text"
									autocomplete="off"
									placeholder="验证码"
								>
									<template #prefix>
										<VerifiedOutlined class="site-form-item-icon" />
									</template>
								</a-input>
							</a-form-item>
						</a-col>
						<a-col  :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
							<img class="getCaptcha" :src="codeUrl" @click="getCode" />
						</a-col>
					</a-row>
					<a-row :gutter="24">
						<a-col  :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<a-button
									size="large"
									type="primary"
									html-type="submit"
									class="login-button"
									:loading="logining"
									:disabled="logining"
									@click="handleSubmit"
								>
									<span>确定</span>
								</a-button>
						</a-col>
						<a-col  :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<a-form-item>
								<a-form-item name="remember" no-style>
									<a-checkbox v-model:checked="remember">记住密码</a-checkbox>
								</a-form-item>
								<a class="login-form-forgot" href="">忘记密码</a>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</div>
		</div>
	</UserLayout>
</template>

<script lang="ts" setup>
import { LockOutlined, UserOutlined, VerifiedOutlined } from "@ant-design/icons-vue";
import { Rule } from "ant-design-vue/lib/form";
import { ipcRenderer } from "electron";
import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import UserLayout from "./UserLayout.vue";


const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance() as any;
const remember = ref("");
const logining = ref(false);
interface FormState {
	username: string;
	password: string;
	code: string;
	uuid: string;
}
const rules: Record<string, Rule[]> = {
	username: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
	password: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
	code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
};
const formState = reactive<FormState>({
	username: "admin",
	password: "123456",
	code: "",
	uuid: ""
});
const captchaOnOff = ref(true);
const codeUrl = ref("");
const onFinish = (values: any) => {
	console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any) => {
	console.log("Failed:", errorInfo);
};
const disabled = computed(() => {
	return !(formState.username && formState.password && formState.code);
});
const getCode = async () => {
	const res = await proxy.$request.get("/captchaImage");
	if (!res) return;
	captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff;
	if (captchaOnOff.value) {
		codeUrl.value = "data:image/gif;base64," + res.img;
		formState.uuid = res.uuid;
	}
};

const handleSubmit = async () => {
	if (!(formState.username && formState.password && formState.code)) return;
	logining.value = true;
	const res = await proxy.$request.post("/login", formState);
	if (res.Success) return (logining.value = false);
	if (res.code != 200)
		return (
			setTimeout(() => {
				logining.value = false;
			}, 500),
			getCode()
		);
	if (res.token != undefined) {
		
		localStorage.setItem("Cusertoken", res.token);
		proxy.$cookies.set("Cusertoken", res.token, "30MIN"); //存储、设置cookie过期
		setTimeout(() => {
			loginSuccess(res);
			logining.value = false;
		}, 500);
		if (captchaOnOff.value) {
			getCode();
		}
	}
	// localStorage.removeItem('Cusertoken') //删除
};
const loginSuccess = async (res: any) => {
	router.push({path: "/home"});
	//此处跨越做路由的判断，登录成功直接进，路由里面做了token判断拦截，
	// // console.log(router.currentRoute.value)
	// const redirect = proxy.$route.query.redirect;
	// if (redirect && redirect != "/") {
	// 	router.replace(redirect);
	// } else {
	// 	router.push({
	// 		path: "/home"
	// 	});
	// }
};

onBeforeMount(() => {
	getCode();
	console.log(import.meta.env.VITE_BASE_URL, process.env.BASE_URL);
});
</script>
<style lang="less"></style>
